<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>HTML学习笔记</title>
</head>

<body>
    <h1>html必需语法</h1>
    文档类型+语言+字符集
    <div>
        <a href="./domapi.html">点此进入webapi页面</a><br>
        <a href="./jstest.html">点此进入js基本语法页面</a><br>
        <a href="./教程.md">点此进入笔记文档</a>
    </div>

    <h1>标签划分</h1>
    <h3>1、标题h分为1-6个级别</h3>
    <p>段落标签p，两段间距会空一行</p>
    临时换行标签br,单标签br之后空一个再写/，两行间距很小<br />
    <strong>加粗标签strong</strong><br />
    <em>倾斜标签em</em><br/>
    <del>删除线标签del</del><br/>
    <ins>下划线标签ins</ins><br/>
    <div>分区标签div，和标题类似单独占据一行，只是没有大的字体而已</div>
    跨度标签span，可以一行写多个，<span>每个</span>span之间<span>有较长空格</span>
    <p>
        <h3>2、插入图片img单标签，必须有src属性， 也可以在标签内加上其他属性图片如下, 鼠标移到图上显示信息用title属性, 等比例缩放图片用width或height属性， 只要写一个就能等比例变化,但是就算是数值也要括号括起来
        </h3>
        <img src="imgs/girl.jpg" title="鼠标移过来" width="300" /><br />
        <strong>如果图裂了，可以用alt属性来文字形容图片</strong>
        <img src="imgs/hs.jpg" alt="图裂了" /><br />
    </p>
    <p>
        <h3>3、超链接a，必需有href属性, 亦可以加target=_blank属性表示新标签页打开，_self表示本页面打开
        </h3>
        超链接可以链接网址、文件下载、内部网址等
        <a href="http://www.baidu.com" target=_blank>点这里！超链接</a>
        <p>锚点链接通过href中加个#属性来跳转到本页面指定位置，只要在对应的位置标签价格id=属性即可，目标标签是什么都可以只要有id</p>

    </p>
    <p>
        <h3>4、注释和特殊字符</h3>
        <p>注释用！----
            <!--注释-->
        </p>
        <p>特殊字符后面有个分号：tab&nbsp&nbsp&nbsp&nbsp;、小于号&lt;、大于号&gt;&amp;&times;&divide;&sup2;&sup3;</p>
    </p>
    <p>
        <h3>5、表格，用table标签，内部一级标签thead、tbody表示表头和主体（可不写），内部二级标签tr表示行，如果是标题行用th，三级标签td表示列</h3>
        可以在table标签里写属性align位置、边框border、宽度width、单元格间距cellspacing、文字间距cellpadding
        <table align="center" border="1" cellspacing="0">
            <thead>
                <tr>
                    <th>name</th>
                    <th>age</th>
                    <th>sex</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tom</td>
                    <td>21</td>
                    <td>male</td>
                </tr>
                <tr>
                    <td>Jack</td>
                    <td>32</td>
                    <td>male</td>
                </tr>
                <tr>
                    <td>Jessica</td>
                    <td>12</td>
                    <td>femal</td>
                </tr>
            </tbody>
        </table>
        <p>单元格合并，跨行：上下几行合并，在最上方td标签写rowspan=x<br/> 跨列：左右几行合并，在最左侧td标签写colspan=x,并删除被合并的单元格标签<br/>
            <strong>注意语法：表头的th标签就是td标签！行还是要用tr表示</strong>
            <table border="1" width="150" height="40" cellspacing="0">
                <thead>
                    <tr>
                        <!-- th标签就是td标签！行还是要用tr表示 -->
                        <th>列1</th>
                        <th colspan="2">列2</th>
                        <!-- <td>列3</td> -->
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td rowspan="2">1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <!-- 因为上一行要合并，所以下一行不要第一列，就合并了12行的第一列 -->
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </tbody>
            </table>
        </p>
    </p>
    <p>
        <h3>6、列表标签,ul和ol类型一级标签有且只有li标签！li标签里倒是都可以放</h3>
        <ul>
            <li>无序列表标签ul-li</li>
            <li>有序列表标签ol-li</li>
            <li>自定义列表标签dl-dt-dd</li>
        </ul>
        <dl>
            <dt>dt自定义项目名</dt>
            <dd>项目描述1</dd>
            <dd>项目描述2</dd>
            <dd>项目描述3</dd>
        </dl>
    </p>
    <p>
        <h3>7、表单=表单域form+表单控件input+描述信息</h3>

        <form>
            <h4>编辑控件input,属性根据type选择</h4>
            type=text文本框:<input type="text" value="0" maxlength="12" id="cycle"><br/> type=password密码框
            <input type="password"> <br/>type=checkbox多选控件,需要有相同name属性,checked属性表示默认勾选

            <input type="checkbox" checked="checked"><br/> type=radio单选控件,也需要有相同name属性,label标签可以for=id指定服务对象<br/>
            <label for="boy">label男：</label><input type="radio" name="sex" id="boy"> &nbsp;&nbsp;&nbsp;
            <label for="girl">label女：</label><input type="radio" name="sex" id="girl"><br/>
            <input type="submit"> 需要在form标签后写action和method属性之后才能传数据&nbsp;&nbsp;
            <input type="reset">重置<br/>
            <input type="button" value="按钮控件js控制">
            <h4>选择控件select-option,在选项标签内部selected属性可以默认选择该项</h4>
            <select>
                <option>1</option>
                <option>2</option>
                <option selected="selected">3</option>
                <option>4</option>
            </select>
            <h4>文本域控件textarea，用cols和rows定义控件大小</h4>
            <textarea cols="30" rows="4"></textarea>
        </form>
    </p>
    <p>
        <h3>8、动态创建</h3>
        <div id="acti"></div>
    </p>
    <script>
        var te = document.getElementById("cycle");
        for (var i = 0; i < 10; i++) {
            setTimeout(() => {
                te.value += i;
            }, 5000);
        };
        //等5s后输出全部，不是5s输出一个！var和let都是这样
        //不过var输出的是10个10；let输出的是0-9
        var d1 = +new Date();
        var ul = document.querySelector('#acti');
        var arr = []
        for (var k = 0; k < 10; k++) {
            arr.push('<a href="javascript:;">kan</a>')
        }
        ul.innerHTML = arr.join(' ');
        var d2 = +new Date();
        console.log(d2 - d1);
    </script>

</body>

</html>